<template>
	<swiper :options="swiperOption1" id="swiperAd">
		<swiper-slide v-for="(item, i) in live.ads" :key="i">
			<a :href="item.url">
				<img v-if="item.picBig" :src="item.picBig" alt>
				<p v-else>{{item.desc}}</p>
			</a>
		</swiper-slide>
	</swiper>
</template>

<script>
	import "swiper/dist/css/swiper.css";
	import {
		swiper,
		swiperSlide
	} from "vue-awesome-swiper";
	export default {
		data() {
			return {
				swiperOption1: {
					autoplay: true,
					slidesPerView: 1,
				}
			};
		},
		computed: {
			live() {
				return this.$store.state.live;
			}
		},
		components: {
			swiper,
			swiperSlide
		}
	};
</script>

<style lang="less" rel=stylesheet/less scoped="scoped">
	#swiperAd {
		height: 100%;
		width: 100%;
		font-size: 16px;
		position: absolute;
		background: #A1A1A1;
		top: 0;
		left: 0;

		a {
			text-decoration: none;
			color: #7e8c8d;

			p {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}

			img {
				max-width: 100%;
				height: 100%;
			}
		}
	}
</style>
